import React from 'react'
import { TodoStatus } from '../App'
import { useNavigate } from 'react-router-dom'

// 筛选标签组件，支持路由切换所有/进行中/已完成
interface Props {
  value: TodoStatus
}

// tabs: 标签配置，包含路由路径
const tabs: { label: string; value: TodoStatus; path: string }[] = [
  { label: '所有', value: 'all', path: '/all' },
  { label: '进行中', value: 'active', path: '/active' },
  { label: '已完成', value: 'completed', path: '/completed' },
]

const FilterTabs: React.FC<Props> = ({ value }) => {
  // useNavigate: 路由跳转
  const navigate = useNavigate()
  return (
    <div className="filter-tabs">
      {tabs.map(tab => (
        <span
          key={tab.value}
          className={value === tab.value ? 'active' : ''}
          onClick={() => navigate(tab.path)}
        >
          {tab.label}
        </span>
      ))}
    </div>
  )
}

export default FilterTabs